<script setup lang="ts">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { delObjs, fetchList, putObj, reduction } from '/@/api/admin/metaField';
import { useMessage, useMessageBox } from '/@/hooks/message';

// 定义变量内容
const visible = ref(false);
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		delFlag: '1',
	},
	pageList: fetchList,
	createdIsNeed: false,
});
//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

const openDialog = (entityId: string) => {
	state.queryForm.entityId = entityId;
	getDataList();
	visible.value = true;
};

// 多选事件
const selectionChangHandle = (objs: { id: string }[]) => {
	selectObjs.value = objs.map(({ id }) => id);
	multiple.value = !objs.length;
};

const handleDelete = async (ids: string[]) => {
	try {
		await useMessageBox().confirm('此操作将永久删除');
	} catch {
		return;
	}

	try {
		await delObjs(ids, 1);
		getDataList();
		useMessage().success('删除成功');
	} catch (err: any) {
		useMessage().error(err.msg);
	}
};

const reductionFun = (id: string) => {
	reduction(id).then((res) => {
		getDataList();
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<template>
	<el-dialog title="回收站" v-model="visible" :close-on-click-modal="false" draggable>
		<div class="layout-padding-auto layout-padding-view">
			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
				@selection-change="selectionChangHandle"
				@sort-change="sortChangeHandle"
			>
				<el-table-column type="selection" width="40" :selectable="selectable" align="center" />
				<el-table-column type="index" label="#" width="40" />
				<el-table-column prop="name" label="名称" show-overflow-tooltip />
				<el-table-column prop="label" label="编码" show-overflow-tooltip />
				<el-table-column label="操作" width="150">
					<template #default="scope">
						<el-button
							icon="delete"
							:disabled="scope.row.systemFieldFlag == 1"
							text
							type="primary"
							v-auth="'admin_metaField_del'"
							@click="handleDelete([scope.row.id])"
							>删除
						</el-button>
						<el-button
							icon="switch"
							:disabled="scope.row.systemFieldFlag == 1"
							text
							type="primary"
							v-auth="'admin_metaField_del'"
							@click="reductionFun(scope.row.id)"
							>还原
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
		</div>
	</el-dialog>
</template>

<style scoped lang="scss"></style>
